<template>
    <div>
        <el-card  class="xj-table-list">
            <avue-crud ref="crudGcTest"
                       :data="data"
                       :option="option"
                       v-model:page="page"
                       v-model:search="search"
                       :table-loading="loading"
                       :cell-style="cellStyle"
                       @on-load="onLoad"
                       @refresh-change="onLoad"
                       @search-change="searchChange"
                       @row-click="handleRowClick">
                <!-- 启用/禁用插槽(默认提供,按需使用) -->
                <template #disable="{size,row}">
                    <el-switch v-model="row.disable" @change="updDisable(row)"

                               :active-value=0 :inactive-value=1
                               active-text="" inactive-text="">
                    </el-switch>
                </template>

            <template #time-search="{size}">
                <div class="block">
                    <el-date-picker
                            v-model="search.time"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            type="datetimerange"
                           :shortcuts="defaultdata.timeOptions.shortcuts"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                    </el-date-picker>
                </div>
            </template>

                <template #menu-left="{size}">
                    <span><!--  防抖动--> </span>
                    <el-button type="primary" :size="size" icon="el-icon-plus" plain @click="addDialogVisible = true">新增</el-button>
                </template>
                <template #menu="{scope,row,size,index}">
                    <el-button type="primary" :size="size" text icon="el-icon-edit" @click="updRow(row,1)">编辑</el-button>
                    <el-button type="primary" :size="size" text icon="el-icon-delete" @click="rowDel(row,index)">删除</el-button>
                </template>
            </avue-crud>
            <!-- 弹层 -->
            <el-dialog draggable title="新增" v-if="addDialogVisible" v-model="addDialogVisible" :width="dialogWidth" top="6vh" @close="closeDialog">
                <Add @closeDialog="closeDialog" :uri="uri"></Add>
                <span slot="footer" class="dialog-footer"></span>
            </el-dialog>
            <el-dialog draggable title="编辑" v-if="updDialogVisible" v-model="updDialogVisible" :width="dialogWidth" top="6vh" @close="closeDialog">
                <Upd @closeDialog="closeDialog" :uri="uri" :rowData="rowData"></Upd>
                <span slot="footer" class="dialog-footer"></span>
            </el-dialog>
        </el-card>
    </div>
</template>


<script>
    import {defineAsyncComponent} from 'vue';
    export default {
        components: {
            Add: defineAsyncComponent(() => import('./gcTestAdd.vue')),
            Upd: defineAsyncComponent(() => import('./gcTestUpd.vue'))
        },
        data() {
            return {
                uri: {
                    infoList: "/api/admin/test/gcTest/findPage",
                    info: "/api/admin/test/gcTest",
                },
                loading: true,
                dialogWidth: "60%",
                addDialogVisible: false,
                updDialogVisible: false,
                page: this.website.pageParams,
                search: {},
                data: [],
                rowData: {},
                option: {},
            }
        },
        async mounted() {
            this.option = JSON.parse(JSON.stringify(this.website.optionConfig));
            this.option.column = [
                 {
                    label: '名称 ',
                    prop: 'name',
                    search: true,
                    searchSpan: 5,
                    overHidden: true,
                },
                {
                    label: '年龄 ',
                    prop: 'age',
                    search: false,
                    searchSpan: 5,
                    overHidden: true,
                },
                {
                    label: '性别 ',
                    prop: 'sex',
                    type: 'select',
                    search: true,
                    searchSpan: 5,
                    filterable:true,
                    overHidden: true,
                    dicData: this.dict.get('DEFAULT'),
                },
                {
                    label: '爱好 ',
                    prop: 'like',
                    type: 'select',
                    search: false,
                    searchSpan: 5,
                    overHidden: true,
                    dataType: 'string',
                    dicData: this.dict.get('DEFAULT'),
                },
                {
                    label: '城市 ',
                    prop: 'city',
                    type: 'select',
                    search: true,
                    searchSpan: 5,
                    filterable:true,
                    overHidden: true,
                    dicData: this.dict.get('DEFAULT'),
                },
                {
                    label: '禁用 ',
                    prop: 'disable',
                    type: 'select',
                    search: true,
                    searchSpan: 5,
                    filterable:true,
                    overHidden: true,
                    dicData: this.dict.get('WHETHER'),
                },
                {
                    label: '单图文件 ',
                    prop: 'headUrl',
                    search: false,
                    overHidden: true,
                    html: true,
                    formatter: (row) => {
                        if(row.headUrl == null || row.headUrl == ''){
                            return "";
                        }else{
                            let imgs = row.headUrl.split(",");
                            let html = ""; 
                            imgs.forEach(item => html += "<img src='" + item + "'  style='border-radius: 40px;height: 40px;width: 40px;margin-top: 10px'>")
                            return html;
                        }
                    }
                },
                {
                    label: '多图文件  ',
                    prop: 'headFiles',
                    search: false,
                    overHidden: true,
                    html: true,
                    formatter: (row) => {
                        if(row.headFiles == null || row.headFiles == ''){
                            return "";
                        }else{
                            let imgs = row.headFiles.split(",");
                            let html = ""; 
                            imgs.forEach(item => html += "<img src='" + item + "'  style='border-radius: 40px;height: 40px;width: 40px;margin-top: 10px'>")
                            return html;
                        }
                    }
                },
                {
                    label: '视频文件 ',
                    prop: 'videoFiles',
                    search: false,
                    searchSpan: 5,
                    overHidden: true,
                },
                {
                    label: '任意文件 ',
                    prop: 'files',
                    search: false,
                    searchSpan: 5,
                    overHidden: true,
                },
                {
                    label: '时间 ',
                    prop: 'time',
                    search: true,
                    searchSpan: 10,
                    overHidden: true,
                },
                {
                    label: '时间-小时 ',
                    prop: 'timeTwo',
                    search: false,
                    searchSpan: 5,
                    overHidden: true,
                    type: "time",
                    pickerOptions:{
                        start: '06:00',
                        step: '00:30',
                        end: '23:00'
                    }
                },
                {
                    label: '更多信息-text ',
                    prop: 'text',
                    search: false,
                    searchSpan: 5,
                    overHidden: true,
                },
                {
                    label: '级联选择器  ',
                    prop: 'cascader',
                    search: false,
                    searchSpan: 5,
                    type: 'cascader',
                    dataType: 'string',
                    overHidden: true,
                    filterable: true, 
                    // 在 mounted 事件使用 let res = await this.crud.get() 同步获取数据替换字典数据 
                    dicData: this.defaultdata.dicData, 
                    props: {
                        value: "id",
                        label: "name",
                        children: "children"
                    }
                },
                {
                    label: '数组框 ',
                    prop: 'array',
                    search: false,
                    searchSpan: 5,
                    overHidden: true,
                },
                {
                    label: '图标  ',
                    prop: 'icon',
                    html: true,
                    formatter: (row) => {
                        return row.icon
                    }
                },
                {
                    label: '颜色选择器',
                    prop: 'color',
                    type: 'color',
                    overHidden: true,
                    colorFormat: "hex",
                    showAlpha: false
                },
                {
                    label: '地址选择器',
                    prop: 'map',
                    overHidden: true,
                    html: true,
                    formatter: (row) => {
                        if (row.map != null && row.map.split(',').length >= 3) {
                            return row.map.split(',')[2];
                        }
                        return ''
                    }
                },

            ]
        },
        created() {
        },
        activated: function () {
            this.crud.doLayout(this, this.$refs.crudGcTest)
        },
        methods: {
            onLoad() {
                this.crud.list(this,true);
                this.crud.doLayout(this, this.$refs.crudGcTest)
            },
            searchChange(params,done) {
                console.debug(params)
                this.page.currentPage = 1;
                this.onLoad();
                done();
            },
            closeDialog(isRefresh) {
                this.addDialogVisible = false;
                this.updDialogVisible = false;
                this.rowData = {};
                if (isRefresh != null && isRefresh) {
                    this.onLoad();
                }
            },
            updRow(row, type) {
                this.rowData = row;
                switch (type) {
                    case 1:
                        this.updDialogVisible = true;
                        break;
                    default:
                        this.$message.error('操作类型错误');
                        break;
                }
            },
            rowDel(row, index) {
                this.crud.delRow(this, this.uri.info, row.id, index);
            },
            // 启用/禁用
            updDisable(row) {
               if (row.id != null && this.rowData.disable != row.disable){
                   this.crud.put(this.uri.info + "/" + row.id, {disable: row.disable});
               }
            },
            // 点击保存行数据(供行操作的任意地方获取数据)
            handleRowClick(row) {
                this.rowData = JSON.parse(JSON.stringify(row));
            },
            cellStyle({row, column}) {
                 if (column.property == "disable") {
                     // fontWeight: 'bold',fontSize: '20'
                     return row.disable == 0 ? {color: 'green'} : {color: 'red'}
                 }
            }
        }
    }
</script>
